<template>
  <span>
    <a-button @click="importView">{{ btnTititle }}</a-button>
    <!-- 批量导入对话框 -->
    <import-container
      v-if="visibleOpen"
      :title="props.title"
      :export-url="props.exportUrl"
      :import-url="props.importUrl"
      :file-code="props.fileCode"
      :accept="props.accept"
      :cols="props.cols"
      :params="props.params"
      :export-type="exportType"
      :show-secret-level="props.showSecretLevel"
      :is-show-down-load="props.isShowDownLoad"
      :fiext-secret-level="fiextSecretLevel"
      :filter-secret-level="filterSecretLevel"
      @close-drawer="closeDrawer"
      @finish="finish"
    ></import-container>
  </span>
</template>

<script setup lang="ts">
  import { ref, defineProps, onMounted, defineEmits } from 'vue';
  import importContainer from './import-container.vue';

  const importView = () => {
    if (props.beforeOpen) {
      props.beforeOpen(() => {
        visibleOpen.value = true;
      });
      return;
    }
    visibleOpen.value = true;
  };
  const emit = defineEmits(['closeDrawer', 'finish']);
  const props = defineProps({
    btnTititle: {
      type: String,
      default: '导入',
    },
    title: {
      type: String,
      default: '',
    },
    // 下载模板
    exportUrl: {
      type: String,
      default: '',
      required: false,
    },
    /**
     * 下载模板接口类型 api:接口返回流的形式;url:文件地址形式；apiUrl:接口返回文件地址形式
     */
    exportType: {
      type: String,
      default: 'url',
    },
    fileCode: {
      type: String,
      default: 'url',
    },
    // 导入
    importUrl: {
      type: String,
      default: '',
    },
    accept: {
      type: String,
      default: '.xlsx, .xls',
      required: false,
    },
    cols: {
      type: Array,
      default: null,
    },
    params: {
      type: Object,
      default: () => {
        return {};
      },
      required: false,
    },
    isShowDownLoad: {
      type: Boolean,
      default: true,
    },
    // eslint-disable-next-line vue/require-prop-types
    beforeOpen: {
      default: null,
    },
    // 导入密级为固定值
    fiextSecretLevel: {
      type: Number || String,
      default: undefined,
    },
    filterSecretLevel: {
      type: Number || String,
      default: undefined,
    },
    // 是否需要密级校验
    showSecretLevel: {
      type: Boolean,
      default: true,
    },
  });
  const closeDrawer = () => {
    visibleOpen.value = false;
    emit('closeDrawer');
  };
  // 完成
  const finish = (response: any, secretLevel: string) => {
    visibleOpen.value = false;
    emit('finish', response, secretLevel);
  };
  const visibleOpen = ref(false);
  onMounted(() => {
    console.log('1111');
  });
</script>

<style lang="less">
  .batch-import-dialog {
    .arco-modal-header {
      padding: 12px 24px 4px;
      color: #1e2228;
      border-bottom: none !important;
    }

    .arco-modal-body {
      padding: 0 0 24px !important;

      .steptabs {
        .arco-tabs-nav-type-line .arco-tabs-tab {
          padding: 12px 16px;
        }

        .arco-tabs-content {
          display: none;
        }
      }

      .tabsone {
        padding: 24px 24px 0;

        .steptop {
          margin-bottom: 24px;
          padding: 0 120px 0 77px;
        }

        .secret-level-ara {
          margin-bottom: 20px;
          padding: 16px 20px;
          background: #f7f9fc;
          border-radius: 6px;

          .arco-form {
            margin-top: 0 !important;

            .arco-row {
              display: flex;
              flex-direction: column;
              margin-bottom: 4px;

              .arco-form-item-label-col {
                width: 50% !important;
              }

              .arco-select-view-single {
                background-color: #fff !important;
                border: 1px solid #cad0db;
                border-radius: 4px;
              }
            }
          }
        }

        .upload-ara {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 24px 0;
          background: #f7f9fc;
          border: 1px dashed #cad0db;
          border-radius: 6px;

          .file-name {
            height: 24px;
            margin-bottom: 8px;
            font-size: 16px;
            line-height: 24px;
          }

          .upload-tip {
            height: 22px;
            margin-top: 8px;
            color: #828b9b;
            line-height: 22px;
            text-align: center;
          }
        }

        .import-result-ara {
          display: flex;
          flex-direction: column;
          align-items: center;

          img {
            width: 360px;
            height: 240px;
          }

          .import-result-title {
            margin-top: 20px;
            font-size: 16px;
          }

          .import-result-tip {
            display: flex;
            flex-direction: column;
            width: calc(100% - 48px);
            margin-top: 20px;
            padding: 24px;
            background: #f7f8fa;

            span {
              display: inline-block;
              height: 22px;
              line-height: 22px;
            }
          }
        }

        .tip {
          color: #828b9b;

          .tip1 {
            height: 22px;
            margin: 16px 0 8px;
            line-height: 22px;
          }

          .tip2 {
            display: flex;
            flex-direction: column;

            .tip-dowload {
              color: #1e89ff;
              cursor: pointer;
            }
          }
        }
      }

      .tabstwo {
        min-height: 400px;
        padding: 24px 24px 0;
      }
    }

    .arco-modal-footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: 52px;
      padding: 0 24px !important;
      border-top: 1px solid #e4e7ed;
      box-shadow: none !important;
    }
  }
</style>
